<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Mouse Event</title>
  <style>
    #container {
      position: relative;
    }

    #container .msg{
      padding: 5px; 
    }

    #stage {
      position: absolute;
      border: 1px solid gray; 
      top: 0px;
    }
  </style>
</head>

<body>
  <h1>Mouse Event</h1>
  <div id="container">
    <p class="msg">click!!</p>  
    <canvas id="stage" width="300" height="300"></canvas>
  </div>

  <script src="../dist/stage.js"></script>
  <script>
    const stage = new stg.Stage('stage');
    const itemNum = 30;
    const graphics = new stg.Graphics();
    const startX = 150;
    const startY = 150;
    const radius = 120;

    graphics.fillStyle = '#F08';
    graphics.strokeStyle = '#903';
    graphics.beginPath();
    graphics.arc(0, 0, 10, 0, Math.PI * 2, false);
    graphics.fill();
    graphics.stroke();

    for (let i = 0; i < itemNum; i += 1) {
      const item = new stg.Shape(graphics);
      const theta = Math.PI * 2 * (i / itemNum);
      item.x = startX + radius * Math.cos(theta);
      item.y = startY + radius * Math.sin(theta);
      item.on(stg.MouseEvent.CLICK, event => {
        item.scaleX = item.scaleY += 0.5;
        stage.update();
      });
      stage.addChild(item);
    }

    stage.update();

  </script>
</body>

</html>